<template>
  <div class="container">
    <a-card>
      <a-row>
        <a-col :flex="1">
          <a-form :model="searchModel" layout="inline" label-align="right">
            <a-row>
              <a-col flex="auto">
                <a-form-item field="method" label="请求方式">
                  <a-select
                    v-model="searchModel.method"
                    :options="methodOptions"
                    placeholder="请选择请求方式"
                    allow-clear
                  ></a-select>
                </a-form-item>
              </a-col>
              <a-col flex="auto">
                <a-form-item field="createUser" label="操作人">
                  <a-input
                    v-model="searchModel.createUser"
                    placeholder="全部"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 86px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="refresh">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :data="renderData"
        :columns="columns"
        :bordered="{ wrapper: true, cell: true }"
        @page-change="changeCurrent"
        @page-size-change="changePageSize"
      >
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { usePagination } from 'vue-request';
  import defaultPageOptions from '@/utils/pagination';
  import { pageLog } from '@/api/upms/log';

  const methodOptions = [
    { label: '新增', value: 'POST' },
    { label: '查询', value: 'GET' },
    { label: '修改', value: 'PUT' },
    { label: '删除', value: 'DELETE' },
  ];

  // 初始数据
  const generateModel = () => {
    return {
      method: undefined,
      createUser: undefined,
    };
  };

  const searchModel = ref(generateModel());

  const {
    data,
    loading,
    changeCurrent,
    changePageSize,
    refresh,
    current,
    pageSize,
    total,
  } = usePagination((params) => pageLog({ ...params, ...searchModel.value }), {
    ...defaultPageOptions,
  });

  const renderData = computed(() => data.value?.records || []);

  const pagination = computed(() => ({
    current: current.value,
    pageSize: pageSize.value,
    showTotal: true,
    showPageSize: true,
    total: total.value,
  }));

  const columns = [
    { title: '标题', dataIndex: 'title' },
    { title: 'IP地址', dataIndex: 'ipAddress' },
    {
      title: '资源路径',
      dataIndex: 'requestUri',
      ellipsis: true,
      tooltip: true,
    },
    {
      title: '请求方式',
      key: 'method',
      render: ({ record }: { record: any }) =>
        methodOptions.find(({ value }) => value === record.method)?.label,
    },
    {
      title: '请求参数',
      dataIndex: 'params',
      ellipsis: true,
      tooltip: true,
    },
    { title: '操作人', dataIndex: 'createUser' },
    { title: '创建时间', dataIndex: 'createTime' },
    {
      title: '异常信息',
      dataIndex: 'exception',
      ellipsis: true,
      tooltip: true,
    },
  ];

  const reset = () => {
    searchModel.value = generateModel();
  };
</script>

<script lang="ts">
  export default {
    name: 'Log',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0px 10px 0px 10px;
  }
</style>
